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Introduction 


A quick note from the authors 


UI design is much more than just fitting together the puzzle pieces 
of a layout. To design an interface is to create function from form, 
to create structure while simplifying, and to illuminate while de¬ 
lighting. 

The tricky part is that people will know within a couple of seconds 
whether or not they will stay on your site. Because vision is the 
dominant human sense, your site needs to provide all of the above 
value and meaning as clearly and smoothly as possible. 

In this e-book, we cover topics spanning UX design, UI design, and 
human psychology. 

Beginners can learn about how to practically apply Gestalt prin¬ 
ciples to web UI design. More advanced readers will learn how 
to take advantage of negative space, how to balance contrast and 
similarity in interface objects, and how to use color based on the 
desired emotion. 
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To make this book as actionable as possible, we’ve also included 
visual examples (with plenty of analysis) from 33 companies includ¬ 
ing Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom, 
Bose, AIGA, and zz. 

Like all of our other e-books, we’ve written this in a simple-to-read, 
practical format. We deconstruct the theory so you know why best 
practices exist, but we teach with example so you know how to 
apply them. 

We’d love your thoughts on what we’ve written, and feel free to 
share if you find this book helpful. 


For the love of UI design, 
Jerry Cao 

co-written by Kamil Zieba, Krzysztof Stryjewski, and Matt Ellis 




Jerry Cao is a content strategist at UXPin where he gets to put his 
overly active imagination to paper every day. In a past life, he de¬ 
veloped content strategies for clients at Brafton and worked in 
traditional advertising at DDB San Francisco. In his spare time he 
enjoys playing electric guitar, watching foreign horror films, and 
expanding his knowledge of random facts. 

Follow me on Twitter. 



Co-founder and head of product, Kamil previously worked as a UX/ 
Ul Designer at Grupa Nokaut. He studied software engineering in 
university, but design and psychology have always been his great¬ 
est passions. Follow me on Twitter @ziebak 



Krzysztof is a graphic designer at UXPin. He is also a typography 
enthusiast and a founder of the global Typeseeing Project. Since 
2014, he has been an instructor at the Academy of Fine Arts in 
Gdansk, where he teaches his students about design theory and 
design software. In his free time, he enjoys playing and inventing 
board games. Follow me on Behance. 



With a passion for writing and an interest in everything anything 
related to design or technology, Matt Ellis found freelance writing 
best suited his skills and allowed him to be paid for his curiosity. 
Having worked with various design and tech companies in the past, 
he feels quite at home at UXPin as the go-to writer, researcher, and 
editor. When he’s not writing, Matt loves to travel, another byprod¬ 
uct of curiosity. 




Practical Application of 
Gestalt to Web Ul Design 


Admit it, at some point in your life, you were impressed by an op¬ 
tical illusion. 

It’s fascinating how our eyes play tricks on us, and it’s even more 
fascinating that we tend to side with our sight over our common 
sense. But optical illusions are often the result of the science of 
sight - the science of Gestalt. 



Photo credit: “Duck Rabbit Illusion.” Wikipedia. Creative Commons 2.0. 

The Gestalt principles are the theories that analyze the gray areas of 
how our sight works. These principles explain how people perceive 
visual objects, and how variations in arrangement, perspective, size, 
etc. can alter this perception. 
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In this piece, we’ll take a quick look at the concepts behind Gestalt 
and only the most applicable principles for day-to-day UI design. 


Gestalt principles bring to light the grey areas of human vision 


Pillars of Gestalt for Design 

Despite how it may seem, the Gestalt principles are not the life 
work of some guy named “Gestalt.” Gestalt is actually the German 
word for shape or form, and lent its name to an early 20th century 
psychology movement, where the Gestalt principles originated. 
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Photo credit: “Gestalt Principles Composition.” Wikipedia. Creative Commons 2.0. 
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As the legend goes, in 1910, psychologist Max Wertheimer watched 
the way the lights of a railroad crossing flickered on and off (like 
lights “encircling” a movie theater marquee). It created the illu¬ 
sion that the lights were moving in a circle, even though they were 
merely alternating with good timing. This division between how 
we perceive visual stimuli versus what we see fueled the Gestalt 
movement for the next couple decades. 

Wertheimer, along with his colleagues, developed theories on sight 
perception that, more than half a decade later, are foundational 
to web design. The theories expound on Aristotle’s simplistic but 
classic axiom, “The whole is greater than the sum of its parts,” as 
applied to visuals. The Gestalt principles tend to revolve around a 
handful of similar concepts. While relating to all sight perception, 
these ideas are especially applicable to web UI design. 

Let’s take a look below at the 4 properties behind Gestalt. 

1. Emergence 

When trying to identify an object, we (humans) first attempt to 
identify the object’s outline, and then match it to outlines we al¬ 
ready know. It’s only after this outline pattern identification that 
we start to notice the details of an object, the parts as separate 
from the whole. 

This picture is often cited when explaining Gestalt principles. 
In it, the viewer identifies the dalmatian all at once, instead of 
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something like, “there’s a dalmatian leg, there’s a dalmatian head. 
Put them together, and...” 

Application to Web Design: Shapes and contours should take 
precedence over lesser details (no matter how creative they are 
or how stunning they look). It doesn’t matter how fascinating a 
clickable button looks if your users don’t know it’s a button. Like 
we described in Interaction Design Best Practices, these “signifi¬ 
es” help suggest the function (known as affordances). 

2. Reification 

Because visual stimuli is so inconsistent, our brains are wired to 
“fill in the gaps” when information is missing. This allows us to 
comprehend visuals even when they’re vague or limited. 
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Photo credit: “Reification.” Wikipedia. Creative Commons 2.0 


Each of the above examples is a bit of a trick. In reality, they are 
all ambiguous and incomplete shapes, but our brains can still 
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make sense of them. For example, in Figure A, our brain tells us 
that the 3 incomplete circles are connected by a white triangle. 

Application to Web Design: In addition to horseshoes and 
hand-grenades, “close” also counts in web design. As long as 
you have enough information to communicate an object, the user 
can fill in the rest. This means you’re allowed to be creative with 
your use of white space, treating it as another design tool instead 
of an empty canvas. 

We’ll explain this further below when discussing Closure. 


Treat white space as a design tool, not as an empty canvas. 


3. Multistability 

If an object has more than one interpretation, the mind will alter¬ 
nate between the different interpretations since it can’t see both 
simultaneously. The longer a viewer focuses on one interpretation 
over the other, the more dominant that interpretation becomes. 



Photo credit: “My Wife and Mother in Law.” Wikimedia. Creative Commons. 
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This is the basis for many popular optical illusions, like the one 
above. Viewers can interpret it as an old woman or a young 
woman, but not both at the same time. 

Application to Web Design: Avoid multiple interpretations! Dou¬ 
ble-check that your designs can only be seen the way you want 
them to be seen, strengthening your influence over how the UI 
affects the UX. Usability tests can help identify these problems, 
even if you get a fresh pair of eyes on a design from whoever’s 
sitting next to you. 

4. Invariance 

Like Reification, invariance is another tactic our brains use to com¬ 
prehend visuals despite glaring inconsistencies. Invariance shows 
that we recognize outlines and patterns of objects despite differ¬ 
ences in perspective, rotation, scale, or even slight deformations. 



Photo credit: “Invariance.” Wikimedia. Creative Commons. 
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In the above examples, we can distinguish the objects in A as 
different than the objects in B, even though they’re similar. How¬ 
ever, we also can understand that the objects in A are the same 
as the objects in C and D, even though they’re distorted. 

Application to Web Design: Invariance may not have as direct 
an impact on web design as the other tenements of Gestalt; how¬ 
ever, it is often applied to CAPTCHA tests, as invariance is one 
advantage humans seem to still have over robots. 
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Our 5 Most Useful Gestalt Principles 

In 1954, decades after Wertheimer first paused to stare at train 
lights, Rudolf Arnheim compiled and boiled down the Gestalt prin¬ 
ciples into the book Art and Visual Perception: A Psychology of the 
Creative Eye. As designer Carolann Bonner suggests, there are five 
principles that are most helpful on a daily basis: 

1. Similarity 

2. Figure-Ground Relationship 

3. Grouping 

4. Closure 

5. Continuation 

We’ll describe them in detail below: 

1. Similarity 

Objects that look similar are perceived as similar. 

This has huge implications on web design, a field that values 
communicating information in the quickest and easiest terms 
possible. By creating two elements with a similar visual thread, 
you can explain each’s purpose in a way that feels intuitive. 

The similarities don’t have to be glaring. As shown in the below 
example from design agency Green Chameleon, the navigation 
icons all look different. However, the similarities in color, size, 
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spacing, and placement of icons all suggest that each icon rep¬ 
resents the same level of navigation (top-level). 
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Photo credit: www.greenchameleondesign.com 


Upon hover, an interaction is triggered that slides out the text to 
explain each site section further. This interaction pattern works 
especially well for vertical navigations since it saves space but 
doesn’t sacrifice functionality (provided the icon metaphors 
make sense). 


These relate to patterns and consistency, topics discussed in Inter¬ 
action Design Best Practices. A clever designer will use similarity 
to convey meaning, saving time in explanation and smoothening 
the experience. 

2. The Figure-Ground Relationship 

Elements are perceived as either figures (distinct elements of fo¬ 
cus) or grounds (the background on which the figures lie). Steven 
Bradley lists the 3 types of figure-grounds relationships. 
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Photo credit: www.moddeals.com 


In the above example, Moddeals shows a common pattern that 
exploits the figure-ground relationship. When the newsletter ad 
appears, the rest of the page goes darker, pushing in into the 
background. Additionally, the user can still scroll the page, how¬ 
ever the newsletter ad remains in a fixed position, cementing it 
as the figure set apart from the ground. 



Photo credit: http://tannbach-modul.zdf.de/ 


On a much subtler note, the site for the German film Tannbach 
takes a more layered approach to figure/ground. 
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To emphasize the human relationship in the film, the designer 
makes the two people sharp against a blurred rustic background. 
Through the use of color and typography, the actual interface 
becomes the “primary figure” with the couple becoming the “sec¬ 
ondary figure”. As a result, the user visually connects with the 
couple but still understands how to navigate the site. 

It’s a fairly clever implementation of a simple Gestalt principle 
and shows that you don’t need to interpret the meaning as just 
“make a menu pop out against a blurry background.” 

3. Grouping 

Items that are dissimilar can still be grouped together to appear 
similar. The Gestalt principles suggest at least 2 ways to utilize 
grouping to show relatedness: 

Enclosure - Enclosing dissimilar objects together within a 
perceptible boundary will unify them in the viewer’s mind. 

Proximity - Objects grouped closely together will be perceived 
as similar, especially if separated from other groups by even 
more space. This also ties into the time and spatial elements 

of Hick’s Law, which we described in Interaction Design Best 
Practices. 
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Photo credit: www.facebook.com 


The above Facebook example applies the principles of enclosure 
and proximity. 


The entire post - title, photo, description, comments, etc. - are 
all enclosed within the same box, set apart from the grayer back¬ 
ground, which utilizes both enclosure and the figure-ground re¬ 
lationship. Within the post, options like “Like,” “Comment,” and 
“Share,” are all located in close proximity, suggesting that all are 
ways to personally interact with the post (not to mention their 
related size, font, and color utilize the principle of similarity). 


By putting the controls next to the relevant item, the designer 
spares the user from the hassle of researching, memorizing, and 
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diving into complex user paths. This also relates to the point 
about making clicks easy because you want to minimize the path 
between the user and the goal. The simplification of the system 
allows basic common sense to triumph over lengthy and involved 
explanations. 

4. Closure 

Based on the principles of Reification that we talked about earlier 
in the chapter, closure is the principle that humans will provide 
their own closure to incomplete objects by filling in the gaps 
themselves. This can be used to a designer’s advantage, firstly by 
affording them some leeway with partial designs, and secondly 
by encouraging minimalist styles that communicate elegance. 

Take a look at the grid layout from Abduzeedo below. Even 
though there’s no clear borders on each piece of content, the 
alignment helps our eyes complete the “grid” created by each of 
the 3 images. As such, we see three columns of text instead of 
one large chunk. 
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Photo credit: www.Abduzeedo.com 
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Closure also applies to interactions, creating meaning by filling 
in gaps within actions. 



Photo credit: www.UrbanOutfitters.com 

As designer Carolann Bonner explains, Urban Outfitters uses 
closure to skip a few steps, making the “Add to Bag” interaction 
very smooth. Click on her GIF to follow along as we describe the 
steps after clicking “Add to Bag”: 

• The button text “Add to Bag” becomes “Added!” 

• The number of items next to the shopping bag in the naviga¬ 
tion updates accordingly. 

• A small modal slides down from the shopping bag to visually 
confirm the item was added. 

As a result, we understand when an item is added to our shop¬ 
ping cart without any implicit action. We don’t need to visit the 
shopping cart page to verify, or drag and drop any items (which 
increases friction). By skipping the right steps, the interface pro¬ 
vides enough feedback while keeping the interaction weightless. 
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For more information, Andy Rutledge wrote an excellent piece 

on applying closure to web UI design. 

5. Continuation 

Related to closure, the principle of continuation states that a us¬ 
er’s eye creates momentum as it moves from object to object, 
giving lines a special power in layout design. 

In the below visual aid, viewers perceive a straight line and a 
curved line - not a bent blue line and a bent green line. This 
makes the power of continuation greater than that of colors, itself 
a powerful visual tool for showing similarity. 


Photo credit: www.uxpin.com 

What this means is that users perceive items on a line or curve 
to be similar to each other. 

This has the most obvious effect on site navigation, since items 
on the same horizontal plane appear to have the same level of 
hierarchy. 
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In the below navigation example from CreativeBloq, you can 
see that all navigation items on the first line represent types of 
content. All navigation items on the second line represent cate¬ 
gories of content. The site doesn’t need to call out this difference 
since it’s communicated through the principle of continuation. 


Features News tutorials Opinion Interviews Videos Deals 



CREATIVEBLOQ GRAPHIC DESIGN WEB DESIGN 3D DIGITAL ART MORE... 


▼ 


Photo credit: www.creativebloq.com 


To learn more about Gestalt principles, check out this helpful 
tutorial from Tuts+. 


Takeaway 

Understanding Gestalt principles gives you greater control over 
your visual hierarchy, helps create more harmonious designs, and 
increases the likelihood that your message is communicated to your 
audience. Combining the general principles - emergence, reifica¬ 
tion, multistability, and invariance - as well as the finer principles 
- similarity, closure, the figure-ground relationship, etc. - will open 
up an entirely new level of visual design for your web interface. 



Designing for Space: 
Sculpture Through Subtraction 


Effective use of space in UI design requires an understanding of 
aesthetics, functionality, and human behavior. In fact, spatial design 
is the link between the more stylistic dimensions of language and 
visuals, and the more practical ones of responsiveness, time, and 
user behavior. Space exists somewhere in the middle, dealing with 
issues on both sides of the spectrum. 



Photo credit: “Long beach lighthouse- negative space”. Armando Maynez. Creative Commons. 

We’ll start our discussion on space by talking about it in its purest 
form - white space - and why you shouldn’t fear it. Then we’ll get 
into more practical tips on how to treat space so that your interface 
doesn’t feel cluttered or isolated. 
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Negative Space Is Not Negative 

White space can be daunting. As we discussed in Web UI Best Prac¬ 
tices, white space can feel like an empty canvas - something that 
you must replace with your brilliance, otherwise you’re not doing 
your job. But the truth is something completely different: the de¬ 
signer’s job is to create the best interface and experience possible, 
and that means using white space as just another design tool. 



Photo credit: www.overclothing.com 


All good visual artists understand the importance of negative space, 
the empty area that draws attention to, and accents, the actual sub¬ 
ject. Negative space (the artistic equivalent of a designer’s white 
space) is like the supporting cast whose duty is to make the star of 
the show stand out more by not standing out so much themselves. 
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If you don’t think any part of your design should be intentionally 
blank, take a look at the World’s Worst Website Ever for an extreme 
example of the damage caused by too many objects competing for 
attention. 

In interaction design, white space serves three main functions: im¬ 
proving comprehension, clarifying relationships, and drawing at¬ 
tention. 

1. Improving Comprehension 

If cluttering your interface overloads your user with too much 
information, then reducing the clutter will improve comprehen¬ 
sion. In fact, properly using white space between paragraphs and 
in the left and right margins has been proven to increase com¬ 
prehension up to 20%, as pointed out by Dmitry Fadeyev, Creator 
of Usaura. The skill of using white space lies in providing your 
users with a digestible amount of content, then stripping away 
extraneous details. 

White space can be broken down into four elements: 

• Visual White Space - Space surrounding graphics, icons, and 
images. 

• Layout White Space- Margins, paddings, and gutters. 

• Text White Space - Spacing between lines and spacing be¬ 
tween letters. 

• Content White Space - Space separating columns of text. 
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Let’s take a look at how these four elements create a sense of 
harmony and fluidity. 
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Photo credit: www.medium.com 


Medium is a great example of striking a nice balance with all 4 
elements of white space. 


First, let’s think about the goal of the user from an interaction 
standpoint: they want to access interesting content as quickly 
as possible. The homepage immediately facilitates that goal by 
placing content front and center, with plenty of white space on 
either side to add emphasis. There is ample space around visuals 
and between lines of copy, although the padding around images 
could be more uniform (notice how the space to the left of each 
image is not consistent with space below). 


Beyond improving comprehension, white space also helps cre¬ 
ate mental maps. Minimal white space is used between the top 
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navigation and content stream since both serve similar functions 
in driving the user deeper into content (and similar functions 
should be grouped together). Because the right-side navigation 
focuses more on creating and saving content, more white space 
separates it from the content stream. In this case, white space 
helps users assign different functionalities to different parts of 
the interface. 
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Photo credit: www.medium.com 

Once you click through to an article, white space helps focus the 
user on what they care about most: the content. Notice how the 
extra spacing between each line of text improves readability. On 
a subtler note, the space around the JW Marriott logo calls at¬ 
tention to the brand without feeling intrusive (a perfect counter¬ 
argument against the “Make the logo bigger!” remarks). 



* * © 


Just like the homepage, you can see that plenty of white space 
once again creates distance between groups of objects that serve 
different functions. For example, notice the amount of space 



Designing for Space: Sculpture Through Subtraction 30 

between the primary content and the commenting/ favoriting/ 
share features on the bottom right. 

Ultimately, proper use of white space eliminates waste in your 
interface. Each interaction with the user, therefore, feels neces¬ 
sary in helping them accomplish their goal. Think of it as what 
we described in The Guide to Mockups as “subtractive sculpture.” 
As you remove more stone, you create more space and emphasis 
for your sculpture: 

You start out with a big slab of rock, and slowly chip away to 
get the rough shape of the form you’re creating. You take an¬ 
other pass at it to get a better sense of the object you’re trying 
to extract from the stone. You take another pass to start getting 
a bit more detailed. Eventually, you start honing in on a partic¬ 
ular aspect of the form: a face, the arms, or the torso. Slowly 
but surely you detail each section of the sculpture until you’ve 
arrived at the final form. 

To learn more about white space, check out Smashing Maga¬ 
zine’s listing of 22 expert pieces and take a peek at these 21 in¬ 
spiring examples. 


White space is subtractive sculpture. As you simplify your design 
you emphasize the beauty of what remains. 
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2. Clarifying Relationships 

When observing how individuals organize visual information, 
Gestalt psychologists stumbled on what they call the Law of 
Proximity, which states that images near to each other appear 
similar. For example, take a look at this picture. 

Almost everyone sees 2 groups of dots, rather than simply 20 
dots. The dots are all identical and the only thing differentiating 
them is the white space that separates them. This behavioral 
observation has several important applications to interaction 
design, especially with regards to input forms: 

1. Place labels closest to the relevant fields - As you can see in 

this example, information is communicated far more clearly 
when labels are placed closer to the fields they relate to. 

As described in Web UI Best Practices, research has shown 
that even the slightest hesitation can hurt form completion. 
In this case, merely adjusting the spacing increases the user’s 
confidence in filling out the form, which of course improves 
completion rate. 

2. Group related topics together - When dealing with long 
forms, the task of filling them out can seem so overwhelming, 
some users will quit before even trying. Breaking the infor¬ 
mation up into appropriate groups can help make it feel more 
manageable. 
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As you can see in this image, in the form on the right, just cate¬ 
gorizing the 15 fields into 3 groups makes the process feel 
easier. The amount of content is the same, but the impression 
on users is much different. 


Form fields usually present the most friction to users, but the 
same principles can also apply to navigation and site content. 
Instead of a top navigation menu with 20 items, you can cre¬ 
ate a dropdown menu with 4-7 top-level items and the rest 
categorized under submenus. 


3. Attracting Attention 

As we’ve mentioned before, the lack of other elements will only 
make existing elements stand out more. Let’s take a look at our 
redesign of Yelp below (pulled from our free ebook User Testing 
& Design ). 
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In the above high-fidelity prototype, we added plenty of white 
space to separate the categories from the search function. In 
doing so, the category icons are much more noticeable (and less 
cluttered than their current vertical format). Combined with an 
animation-like color fill that’s triggered on hover, the category 
section now attracts even more attention while providing better 
feedback to the user. 

But because humans have a selective attention that leads to tun¬ 
nel vision - like tuning out banner ads (known as banner blind¬ 
ness) - you also need to know when spacing between content 
should be reduced and altered. 

For example, in the above left image from Westfield London, 
the retailer wanted usability consultant Jakob Nielsen to show a 
timeline of events via lightbox popups. But the design on the left 
fails because the year “2000” went unnoticed. Users are instead 
drawn immediately to the image and body copy. Luckily, in the 
new image, a quick and simple adjustment to the placement of 
“2000” solves the problem. 

Ultimately, you need to understand that the power of white space 
comes from the limits of human attention and memory. 

Just look at the comparison between Yahoo and Google below. 
Yahoo tries to get the user to consider too many actions at once. 
Google understands the bottom line that people just want to use 
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search engines to find stuff. By being realistic about the user goal, 
Google’s design encourages more effective interaction. 


YAHOO/ 





Photo credit: www.yahoo.com 


Google 

* 

Ctongln Search I'm Ponling I Lanky 


Photo credit: www.google.com 


Chunk Your Content 

Most designers subscribe to the “don’t make the user think” school 
of thought. 

It’s not that users are just lazy, it’s that they already have a lot on 
their mind, and cramming extra information just makes it harder 
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to complete their tasks. The amount of strain an interface design 
creates is called “cognitive load,” and a usable and enjoyable UI will 
reduce this as much as possible. 

As complicated as the human brain is, its shortcomings are surpris¬ 
ingly predictable. Take the studies of George Miller, for example - in 
1956, the scientist released his findings that our short-term mem¬ 
ory can usually retain data of between 5-9 items - an average of 
7 - before forgetfulness sinks in. While the exact number has been 
contested (3-6 is the current ideal), Miller’s findings have proven 
effective and led to important IxD methods, including “chunking.” 

Chunking is the practice of grouping relevant information together 
to make it easier to process and remember. In this image, it’s easier 
to remember the first group of shapes because they’re chunked out. 

However, chunking has since been overanalyzed and misinterpret¬ 
ed, looking nowadays as something more like a superstition than a 
best practice. For example, some designers insist that menus, drop- 
downs, or bullet lists should never contain more than 6 items - but 
this is not recommended use of the practice. 

Chunking is not a hard-and-fast rule, but one that depends upon 
the context. In brief, chunking is ideal for the following situations: 

• When your product naturally requires a great deal of informa¬ 
tion that must be memorized for later use. 
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• The UI must must compete against external stimuli for your us¬ 
er’s attention (mobile apps, for example ). 

• E-learning applications (since users must later recall the infor¬ 
mation). 

On the other hand, you don’t need to chunk your content if it’s 
meant to be searched or browsed. There are exceptions, of course, 
as you can see below with Etsy. 



Photo credit: www.etsy.com 


While users don’t need to memorize the categories, chunking out 
the content on the category-level adds visual hierarchy. Once you 
click into the category, the chunking disappears and the items are 
listed. It wouldn’t make sense to apply chunking at the item-level 
since you can understand the frustration from browsing only 5-6 
items per page. 
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Etsy’s treatment allows users to enjoy the best of both worlds. A lar¬ 
ge amount of products are presented, but users don’t feel overstim¬ 
ulated. In the example above, there are 32 different products on the 
screen. Using any other design, the user could feel lost or distracted. 
Thanks to chunking, users can process all the information while 
honing in on the “chunks” that most interest them. 


Takeaway 

Space can either take away or add value to your content - it all 
depends on how you use it. 

Create too much space between related interface objects and your 
design becomes frustrating. Cram too many objects together, and 
your design becomes too cluttered. Pay attention to space when 
creating your layouts, particularly its relationship to user memory 
and how proximity can convey meaning better than a wordy expla¬ 
nation. Space holds a lot of weight in interaction design - which is 
saying a lot for something that is technically nothing. 



The Visual Relationships 
Bom from Contrast & Similarity 


If you’re looking at the dictionary definitions, contrast and similar¬ 
ity seem like complete opposites with little in common. But in web 
design, they’re two sides of the same coin. 



Photo credit: “Ying Yang Sign”. Wikimedia. Creative Commons. 

Contrast and similarity are both two approaches to showing rela¬ 
tionships between a page’s elements - which saves a lot of time and 
user effort since its done visually. 
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We’ll start by explaining how each one works on its own, then 
demonstrate how they can be applied simultaneously to enhance 
each other’s effects. 


Contrast 

As discussed in the free e-book Web UI Best Practices, contrast - 
when used properly - can instill drama and intrigue and highlight 
important differences between functionalities. It boils down to 
primitive human instincts: we’re hard wired to notice differences, 
because it helped us survive at one point in our evolution. 

Contrast is explained in more detail by Brandon Jones, who looks at 
how these affect first impressions of objects in an interface. When 
most people look at this image, they don’t just see two circles, but 
a black circle and a red circle. The significance of this great, espe¬ 
cially in interface items - differentiation is a generic and common 
human response. 

Contrast also instantly communicates boundaries in the layout. For 
example, contrasting the color of the top navigation from the main 
content immediately tells people where the information is located. 

1. Light and Dark 

Everyone who’s used computer or smartphone in the last decade 
is aware of the light and dark contrast applied to buttons. 
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Photo credits: www.dribbble.com 

The central idea behind this is that darkening out of “pressed” 
button makes it seem more realistic, mimicking shading in the 
3D world. Aside from that, the differentiation signals to the user 
that some action has been performed. This kind of contrast goes 
beyond merely improving the visuals, it’s actually a quite useful 
tool when designing an interface. 

As Dmitry Fadeyev, founder of Usaura, points out, the light/dark 
contrast can be applied in two useful ways to web UI design: 

1. It accents anywhere you want the impression of depth - but¬ 
tons, sliders, switches, etc. 

2. You can guide the user’s attention more to light objects by 
contrasting them with dark. 

Even if your site leans more towards a flat UI treatment, at the 
very least, the shading and darkening will still add a 3D appeal. 
The German design agency Dunckelfeld is best-in-class example 
of the power of proper color and contrast, but let’s take a look 
at how they treat their buttons. On the main menu, the buttons 
reverse contrast as you hover over them, providing users instant 
feedback and adding an extra level of interaction. 
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^ j PROJECTS ^ 

Photo credits: www.dunckelfeld.de 

Contrast remains a core element in their interaction design, as 
you can see below. Again, this minimalist treatment reverses 
the contrast on hover, helping to blend navigation into the main 
content without feeling intrusive. 




THE RIDE YOU WAN T 


The German bicycle producer BULLS is the first address for mountain, racing and 
hybrid bikes. A good price, the use of high-class components and an excellent 
manufacturing make BULLS to one of the most favorite bicycle brands of Europe. 



2. Clashing Colors 

Using contrast in colors is a vital technique to grasp, as it can 
help guide the user’s eye, affect their mood, signal cues, and give 
your site its own distinct style. When discussing contrast, colors 
can be divided two conflicting groups: warm and cold. 

• Warm Colors - Reds, oranges, yellows. These tend to be in¬ 
vigorating, energizing, or otherwise aggressive. 
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• Cool Colors - Greens, blues, purples. These lean closer to¬ 
wards relaxing, calming, subduing, and passivity. 

How can you use this to your advantage? 

It’s simple if you know one easy rule: warm colors tend to domi¬ 
nate cool colors. For example, making a call-to-action button red 
can help attract attention to it, but setting that red call-to-action 
button against a blue or green background will draw even more 
attention. 




Photo credit: www.uxpin.com 

See how clearly yellow stands out over the blue in the above 
example? Likewise, the red takes the attention from the green, 
almost shrinking it. 
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Photo credits: TV Safety.org 


Utilizing the contrast between warm and cool colors can draw 
attention to - or away from - certain areas of the interface. Just 
look at the above example from on TV Safety.org, especially how 
the red navigation buttons stand out because they’re offset by the 
green. We talk a little bit more about this can be used in design 
patterns in our Web UI Patterns 2014. 


3. Foreground & Background 

While each Gestalt Principle addresses similarity and contrast in 
some way, contrast is critical to determining the relationship be¬ 
tween figures versus the background and asserting visual dom¬ 
inance. As designer Steven Bradley of Vanseo Design points out, 
too much contrast will ruin the harmony of design, so let’s look 
at two important applications: 
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• Foreground & background - Upon first impression of a de¬ 
sign, we naturally distinguish between figures and the back¬ 
ground. This important relationship provides the context for 
the design. Therefore, they must contrast otherwise users 
won’t even be able to separate the two. 

• Points of focus - These elements are designed to stand out 
from surroundings (through contrast), and the most noticeable 
element is considered dominant. Remaining elements that also 
stand out (but to a lesser extent) are considered focal points. 

As you can see in this image by Bradley, the green circles are 
similar to other green circles, and the orange bars are similar to 
other orange bars. But they stand in direct contrast compared 
to each other. 

Remember to use contrast sparingly. If everything tries to cap¬ 
ture the user’s attention, then nothing will stand out. Pick just 
the most important elements that must stand out, then move on. 

To learn more about contrast as a means of visual hierarchy, 
check out this great piece by Steven Bradley. 


The Visual Relationships Born from Contrast & Similarity 45 


Similarity 

As we mentioned in the first chapter, similarity between objects’ 
appearances communicates similarity between their functions. 

For example, on most navigation menus, the text of each object 
is the same size and font to signal that each is a clickable option. 
While this UI pattern is useful on its own, a savvy web designer will 
delve deeper, exploring different levels of similarities and how they 
create different relationships between objects. 

Not all types of similarity are created equal. Some communicate 
strongly, while others are more subtle - and don’t forget about the 
context. Let’s explore the types of similarities and how they apply 
to web UI design. 

1. The 3 Main Similarities 

Expounding on the Gestalt principles, Andy Rutledge analyzed 

the use of similarity in web design and described the main types 
of similarities, and how strongly they suggest a relationship. 
We’ve found his work on the topic of similarity to be some of 
the most thorough and practical advice available. 

Take a look at his first illustration and see which objects look 
most related. 
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Even though the objects are all the same color, most viewers cite 
shape as the relationship that is the clearest. Despite differences 
in size, the small squares are related to large squares, and the 
small circles are related to the large circles. Pretty simple, right? 

But what if the items were all the same shape and color? 

Now, you’ll likely conclude that the large squares are related to 
each other and the small squares are related to each other. Be¬ 
cause differences in size can create contrast, we can also create 
consistencies of size to communicate relationships. 

Finally, take a look at Rutledge’s third image to see what happens 
when we use the same shapes, but change the size and color. 

With all the same shapes, the viewers here will mentally divide 
the items by color rather than size. 

As Rutledge explains, that puts the hierarchy of similarities, from 
most to least potent, as color, then shape and size. 

This hierarchy owes itself to evolutionary psychology. When 
scanning our surroundings, size and shape might be hard to de¬ 
termine due to all the visual intricacies, but colors immediately 
pop out to us. Just think about how you innately know that a 
bright red snake is not to be messed with. 
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But knowing about the different options is only half the battle. 
Knowing how to apply them is what matters. 

2. Applying Similarity to Web Ul Design 

Every designer must provide visual hints about which interface 
objects relate to each other. Since users know within 10 seconds 
whether or not they’ll leave a site, you need to convey an imme¬ 
diate organization of the interface. 

Let’s take a look at how to apply similarity to the treatment of 
links, content, and overall UI organization. 

1. Links 

Links always need to contrast with other text, but they must be 
similar to each other. 

Typically sites will make links blue, sometimes underlined. As we 
described in Web UI Patterns 2014, this pattern plays off of users’ 
preexisting knowledge of blue text being links, which requires 
less thinking/learning on their part. 

For a traditional link treatment, let’s take a look at Reddit. As 
you’ll see below, it’s nothing revolutionary and exactly what you 
expect for a site whose foundation is the links themselves. 
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comment share 


Photo credit: www.reddit.com 


When you have different categories of links, you can apply differ¬ 
ent similarities to create more elaborate relationships. On Reddit, 
all blue links go to other pages. Meanwhile, grey links indicate 
user actions (like commenting or sharing). 

The username links and subreddit links are the same color, but 
smaller in size than than content links. This plays into the hierar¬ 
chy of similarities (color, size, shape) we just discussed: the blue 
color immediately indicates that all blue text are links, while the 
different size of the username and subreddit indicates they’re 
not the same as links to content. 

Now let’s look at the comment and share links. The designer’s 
priority is ensuring the user understands that these links prompt 
user action. In that case, changing the color is the quickest way 
to visually communicate the difference. But to ensure the text 
still stands out as a link, the designer bolds the text (which is a 
slight change in shape). 
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2. Content 

Aside from categorizing links, one of the designer’s most import¬ 
ant tasks is displaying relationships between content. When cre¬ 
ated correctly, these relationships reinforce hierarchies and im¬ 
ply structure without needing to “wall off” sections of content. 

Let’s look at how the ZURB homepage communicates relation¬ 
ships through similarity. 

We're a nimble team, doing mighty things! We’re empowering businesses 
and teams to put Design first by helping them roll up their sleeves and apply 
customer-centric product design practices to their daily work. 

Have a project or training that you want to get started? Give us a call at 
408.341.0600 or email us at getstarted:&zurh.com. Learn more about our 
Studios work. 



Studios Foundation Notable 


University 


We'll work together to gel your 
product, website or online 
service designed better and 
faster than yon thought possible. 


We've developed the most 
advanced responwe, frcm-end 
framework in the world and 
made it free for ell. 


We've created a product design 
platform for collecting and 
organizing leedback required by 
progressive design. 


We provide training and 
resources because great 
products are results ol design 
literacy end collaboration. 


Photo credit: ZURB.com 


ZURB applies a consistent visual treatment to its different prod¬ 
ucts. The similar color palette and square shape immediately 
communicate that the 4 objects are somewhat related. Once 
you read the description for a product, say Foundation, you can 
quickly assume that all the other similarly styled objects are also 
products created by ZURB. In this case, consistency of visual pre¬ 
sentation suggests consistency of category and context. 
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Because the square treatment contrasts so much with the oth¬ 
er content on the page, the visual similarity between products 
stands out even more. As such, we don’t need to use methods 
like a title that reads “products” to explicitly call out what these 
square objects represent. 

Now, let’s take a look at PatternTap. This site uses similarity to 
convey that every card represents a link to the UI pattern. All the 
cards also display the same behavior when you hover over them, 
creating an experience that reinforces the similarity. 



Photo credit: www.Patterntap.com 
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As we discussed in Web UI Patterns 2014, this split-second visual 
understanding is why cards are one of the most effective patterns 
for content-heavy sites. In fact, Intercom has even gone so far as 
calling it the future of the web. 

3. Organization 

According to Rutledge, similarities in design also creates page¬ 
wide structure. 

You can see in his example that no distinction exists. Every ele¬ 
ment looks the same, so they all look related. 

Now, let’s see what happen when designer you play around with 
color. You can see in his picture that color can create shapes (in 
this case, a column) out of elements that otherwise look the same. 

We can also split the elements into two categories, as you’ll see 
in Rutledge’s third image. The blue squares look related and the 
green squares look related. Every element has the same physical 
characteristics (squares of the same size), yet our eye sees two 
separate categories. 

The takeaway here is that you don’t need physical structure to cre¬ 
ate page structure and relationships between content. You can sug¬ 
gest structure purely from clever use of contrast and consistency. 
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For example, let’s take a quick look at Craigslist. Yes, we know it’s 
not the prettiest site and could benefit from a visual overhaul. 
But it does do a few things right with its content structure. 



F£b 4 Available Now Pet Friendly Studio 
1 bf - (Rose Quarter) pic map 



Tf Feb 4 The Lightbox - Your Urban Retreat 
$2475 / 2br - 1 100ft 2 - (John's Landing) pic map 





m 


k Feb 4 FULLY FURNISHED 1BDR/1BTH FURNISHED SPACE FOR A SHORT TERM SUBLET 
$1200 / 1 br " 71 Oft 2 - pic map 

★ Feb4 SPACIOUS SUBLET IN PRIME LOCATION!! 

$700 / 2br - (north Portland) pic map 



★ Feb 4 Condo living is the life for you! Location and ambiance awaits ! 
I $2200 / 1 br - 636ft 2 - (Lake Oswego) pic map 


Photo credit: www.craigslist.org 


Each of the listings follows the same format: picture at left, click- 
able title at top and in blue, plus the price, date, space size, and 
location all in the same place. If any of the listings deviated from 
this similarity, it would raise suspicion and suggest the listing 
were somehow different. 


Craigslist keeps it stupidly simple. The site feels like a low-fidelity 
version of a real site, but one of the few reasons it’s still usable 
is because it’s structured logically. 

To learn about creating harmony between contrast and similarity, 
we highly recommend checking out designer Steven Bradley’s 
article on Smashing Magazine. Then, to see examples of harmo¬ 
ny between similarity and contrast, check out Codrops’ article 
featuring 25 examples of emphasis in web design. 
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Takeaway 

Don’t make the mistake of deciding whether to use either contrast 
or similarity, use both for the best results. 

Leaning too much on one will reduce the impact of the other, so a 
clever designer strikes a balance between the two - after, of course, 
mastering the nuances of each. If you ever feel lost in this area, 
just take a quick look around the web: you’ll see the subtle uses of 
contrast and similarity of every page. 



Colorful Emotions: Visual 
Vibrancy in Web Ul Design 


The skill of using colors is no less than an artform. 



Photo credit: “ex removal screen cross”. Brett Jordan. Creative Commons. 

Across human history, master painters and other artists have earned 
global recognition from their ability to manipulate colors. In the 
modern era, the artform now opens up a lot of new commercial and 
business applications, first in advertising, and now in web design. 
With an almost bottomless depth, the skill of color usage can be 
improved and refined endlessly. 

We’ll explore the fundamentals of color theory and color scheme, 
then examine the emotional effects of certain colors. 







Colorful Emotions: Visual Vibrancy in Web Ul Design 55 


Color Theory 

The topic of color could fill a whole book on its own, so we’ll stick to 
what’s relevant to UI design here. We can break down color theory 
into 3 parts with regards to web UI design: 

• Contrast - Every shade of color has a set opposite - an "arch-nem¬ 
esis” whose contrast is far greater than any other color. You can 
use the color wheel below to find each specific color’s opposite. 
Simply locate the color on the opposite end of the circle. 



Photo credit: “color wheel”. Michael Hernandez. Creative Commons. 

• Complementation - Colors aren’t always at odds with each other: 
complementary colors accent each other and bring out their best, 
the opposite of contrast. These are the colors immediately next 
to each other on the color wheel, for example, purple’s comple¬ 
ments are blue and pink. 
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• Vibrancy - Each color evokes a specific moods: the brighter 
warm colors (red, orange, yellow) tend to energize a user and 
make them more alert, while darker cool shades (green, blue, 
purple) tend to be more relaxing and tranquil. CNN uses a red 
banner in their top navigation to heighten alertness, a color de¬ 
cision that suits the site’s breaking news content. 
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Photo credit: http://www.edition.cnn.com/ 


Color theory in web design is more than just a visual garnish, it can 
have game-changing effects on your business. If you don’t believe 
us, read conversion consultant Jeremy Smith’s article explaining 

how the psychology of color can expand your business. 


Color theory is a science of its own. Just tweaking 
the saturation can completely change your interface. 
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Vibrancy: Emotional Implications of Color 

There’s no denying the link between emotions and colors: in fact, 
the human race has been documenting the psychological impact of 

color since the Middle Ages. Naturally, any web designer wants to 
harness this as well, since the right colors create the right moods 
and atmosphere for your site. 

We’ve analyzed the advice of the researchers at Vandelay Design 
and Smashing Magazine, and filtered it through our own experience 
at UXPin. 

Please note that different cultures around the world perceive col¬ 
ors differently. We describe emotional associations that are most 
relevant to Western cultures. For a more in-depth look of how dif¬ 
ferent cultures perceive color, read this thorough piece from Web 

Designer Depot. 

Red 

Promotes: power, importance, youth 


O 


The NSA is engaged in the mass surveillance of 
Americans and p eople around the world. 


Photo credit: www.nowaynsa.com 
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The most stimulating color, red is so energizing it has been used 
to increase blood circulation. Representing passion and power, 
red is the color that will attract the most attention, which is why 
it is commonly used for warnings and important notices. 

Red is very appropriate for the No Way NSA website, whose 
purpose is calling alarm to a perceived threat from the NSA. Us¬ 
ing red in the first section of the single-page site is especially 
clever because it calls attention to the primary message while 
physiologically inducing people to “get out of the danger zone” 
by scrolling downwards. This, of course, only makes the user 
engage with more content. 

However, this could work against you, as red can incite anger, 
or at least overstimulation. If you’re going for a more relaxed 
atmosphere, use it sparingly (or at least in a lighter shade) or 
not at all. 

Orange 

Promotes: friendliness, energy, uniqueness 



Photo credit: www.fanta.com 
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As the most muted of the warm colors, orange is uniquely versa¬ 
tile. As a primary color it can be engaging and energizing, and as 
a secondary color it also retains these properties in an unobtru¬ 
sive way. Orange also helps to create a sensation of movement 
and energy. 

Aside from it being part of the brand style, orange works well 
with Fanta’s lighthearted and cartoonish site. The color shows 
creativity while retaining familiarity. 

Yellow 

Promotes: happiness, enthusiasm, antiquity (darker shades) 

f SERVICES KlftTMUQ p LA S H^M E D1A uS CONTACT /pi 



Photo credit: http://flashmediagency.com/home 


Yellow is one of the more versatile colors, depending on the shade. 

A bright yellow is the most energetic of the colors, without the 
severity of red. Middle shades of yellow give a sense of comfort 
while still feeling invigorating. Darker shades (including gold) 
can give the impression of antiquity, and lend an air of timeless¬ 
ness, wisdom, and curiosity. 
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In the above example from web design agency Flash Media, the 
darker shade of yellow exudes energy, curiosity, and authority. 
This makes a lot of sense for a company who thrives on the value 
of their consultancy and skills. 

Green 

Promotes: growth, stability, financial themes, environmental themes 



Photo credit: http://portfolio.ervinandsmith.com/tda-thinkorswim-shanng/ 


Green bridges the gap between warm and cool colors, though 
tends to be more of a cool color. This means green has the same 
relaxing effects of blue, but still retains some of the energizing 
qualities of yellow. As such, it creates a very balanced and stable 
atmosphere. Darker shades give off more of the money/affluence 
feelings which you can see with Ameritrade above. 
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Blue 

Promotes: calm, safety, openness (lighter shades), reliability (darker 
shades) 



.VAN VT.TKT& TRAP 

EVENT DESIGN 

EVENTS WEDDINGS CUSTOM FLORA! DESIGN LECTURES ABOUT CLIENTS PRESS CONTACT SOCIAL 


Photo credit: http://www.vanvlietandtrap.eom/#/ 

Like yellow, blue’s meaning varies greatly depending on the 
shade. All blues are universally relaxing and safe, but the light¬ 
er shades will seem more friendly while the darker ones seem 
more somber. Social media sites like Twitter and Facebook take 
advantage of light and medium shades, while corporate websites 
prefer dark shades’ tones of strength and reliability. 

Van Vliet & Trap, an event design agency, makes clever use of 
dark blue. By using the blue in the flowers in the background, they 
visually hint at their expertise in floral design while also exuding 
trust and reliability. It makes a lot of sense since they plan high 
visibility (and somewhat nerve-wracking) events like weddings. 
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Purple 

Promotes: luxury, romance (lighter shades), mystery (darker shades) 



Photo credit: https://www.cadbury.co.uk/ 


Historically associated with royalty, purple retains the tone of 
luxury, even to the point of decadence. 

Purples suggests lavishness and wealth in general, making it a 
popular choice for fashion and luxury goods (and even chocolate, 
like the Cadbury example above). Lighter shades like lavender 
(with pink hues) are considered romantic, while darker shades 
seem more luxurious and mysterious. 

Black 

Promotes: power, edginess, sophistication 



Photo credit: http://dreamandreach.bose.com/en_US/explore 
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The strongest of the neutral colors, black exists on almost every 
website. 

It can take on varying characteristics depending on its support¬ 
ing colors, or dominate all of them if used in excess. Its strength 
amidst neutrality makes it the color of choice for long blocks of 
text, but as a primary color can give the impression of edginess, 
sophistication, or even evil. 

For most websites, black is used to create an instant feeling of 
sophistication and timelessness. The feeling of elegance is espe¬ 
cially strong well when paired with white font and set against 
a minimalist layout, as you can see in the “Dream and Reach” 
microsite from Bose. 

White 

Promotes: cleanliness, virtue, simplicity 



Photo credit: http://mzkmzk.com/ 

White is the color most associated with virtue, purity, and inno¬ 
cence in Western cultures. 
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Minimalist and simplistic sites most often use it as a background. 
By drawing the least attention of all the colors, white is the best 
for accenting the other colors on the page. 

This works particularly well for the awwwards-winning website 
of artist Kaloian Toshev. The white background draws attention to 
his vibrant artwork, while creating an art-gallery aura of elegance. 

Gray 

Promotes: neutrality, formality, melancholy 

f \ "Jsi for tl. ■ ■ wily arvs irrr:: . >• nl«?rriH /-••• kiij a rni ■ ■ :**' Rwimr i login 



Photo credit: www.awwwards.com 

While in certain situations it can seem brooding or sad, gray is 
nonetheless a popular choice for looking traditional or profes¬ 
sional. However, one of the greatest advantages of gray lies in 
varying its hues - changing the shade can give you a customized 
mix of properties from white and black, a powerful tool in skill¬ 
ful hands. 

When paired with brighter colors and presented in a flat UI, the 
grey background of awwwards feels much more modern than 
it does somber. 
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Beige 

Promotes: traits of surrounding colors 



Photo credit: http://www.dishoom.com/ 

Beige is the wildcard of the colors, as its main use is in drawing 
out other colors. 

On its own, beige is dull, though this can be used to symbolize 
humility. However, it will take on the characteristics of the colors 
around it, making it an interesting design tool. For these reasons, 
beige is almost always a secondary or background color. 

Darker shades of beige (like on the Dishoom site) will create an 
earthy and almost paper-like texture, while lighter shades feel 
fresher. In this case, the lighter shade around the brand name, 
which darkens outwards, help create the feeling that the restau¬ 
rant is a fresh modern take on earthy cuisine. 
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Ivory 

Promotes: comfort, elegance, simplicity 
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Photo credit: http://artinmycoffee.com/ 


In terms of emotional response, ivory (and cream) are slight vari¬ 
ations on white. 


Ivory is seen as warmer (or less sterile) than white, making it 
more comforting while still exuding the same minimalistic and 
complementary aspects. Ivory should be used in place of white 
to soften the contrast between it and darker colors. For the art 
in my coffee site, an orange/brown accent is added to the cream 
background (which looks slighly greyish) to create a sense of 
warmth. 

If you’d like to read more analysis of color and emotion, check 
out this piece by IstWebDesigner which deconstructs color use 
from 20 top brands. 
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Color Scheme 

Every site has a color scheme, the primary colors it uses for its main 
areas. As we’ve been discussing, the repeated use of these colors 
will affect the user’s mind and mood, typically subconsciously, so 
choose them well. 

While there are lots of different ways to mix colors togethers, we’re 
going to focus on the 3 most successful, and common, ones: 

• Triadic - The triadic is the most basic and balanced of the three 
structures. Using vibrancy and complementation, but straying 
from the trickier contrast, the triadic structure is the safest and 
most reliable scheme. On the 12-step color wheel, select any 3 
colors located 120 degrees from each other: one color for the 
background, and two for content and navigation. 



Photo credit: “BYR Color Wheel”. Wikimedia. Creative Commons. Edited from original. 
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Compound (Split Complementary) - The next scheme gets a 
little trickier to pull off, but can be rewarding if done well. The 
concept uses four colors: two contrasting pairs and two comple¬ 
mentary pairs. 



Photo credit: “BYR Color Wheel”. Wikimedia. Creative Commons. Edited from original. 

Look at how stunning the page for Florida Flourish looks just 
based on its colors alone. The red and green contrast together 
with the text tags and plants, plus the blue and orange with the 
sky atop the desert. At the same time, the red/orange and blue/ 
green complements really bring the whole view together nicely. 
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Photo credit: www.floridaflourish.com 
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Analogous - Lastly there is the analogous scheme, which focuses 
exclusively on complementary colors. This one really highlights 
the vibrancy of the colors chosen, for example, a red-orange-yel- 
low analogous scheme will seem very energetic and lively. While 
this scheme is relatively easy to pull off, the trick is in deciding 
which vibrancy of color to use, as it will be exaggerated. 



Photo credit: “BYR Color Wheel”. Wikimedia. Creative Commons. Edited from original. 

By using blues, turquoise, and greens for their analogous site, 
Blinksale creates a subdued and even safe atmosphere for its 
site. Notice how they use the contrasting yellow to draw attention 
to their call-to-action. 



Photo credit: www.blinksale.com 
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What we’ve just discussed are just the fundamentals of how color 
theory can enhance your UI design, but there’s no limit to how 
in-depth you can go with colors on your site. If you’d like to know 
more, you can check out this piece in Smashing Magazine on how 

to create your own color palette. 


Color Assistance Tools 

Thankfully, there are plenty of tools to help you put color theory 

into practice. Check out these pre-made color palettes so you don’t 

need to start from scratch. 

• Adobe Color CC - Once known as Kuler, this has been regard¬ 
ed for a while as one of the most trusted color assistance tools 
available. 

• Paletton - If you’re in need of a tool for speed or a simplified 
ease-of-use, this minimal tool can help you. Great for beginners. 

• Flat UI Color Picker - While for flat UI designs only, this is still 
a useful and convenient tool for color selection. 

To further shorten the learning curve, you can also check out this 

list of 28 website color tools. 
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Takeaway 

No one’s expecting you to be Michelangelo, but a basic understand¬ 
ing of color usage is solid prerequisite for web design. 

As we’ve just explained, colors carry with them a lot of extra weight 
that sometimes goes unnoticed. No matter what colors you choose, 
they have a definite influence on the design as a whole - from 
communicating contrast or similarity, to evoking precise emotions. 



The 5-Second Test 
for Visual Hierarchy 


Studies have shown that it only takes users about l/10th of a second 

to form an impression of your site. To keep users engaged, your site 
needs to have an instant visual hierarchy that logically structures 
all of the elements we’ve discussed (color, space, contrast, etc.). 


ROObOk A ^ £* Irxpn yi7 



Photo credit: http://fitness.reebok.com/be-more-human/ 


Now, let’s look at how you can blur your designs to make sure they 
communicate as clearly as possible. 
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The Blur Test 

At its core, the blur test, as designer Lee Munroe explains, is looking 
at a blurred version of your site and see what elements stand out. 

If it’s not what you want to stand out, it’s time to go back and make 
some revisions. Looking at a blurry version of your page will reveal 
the bare bones of your visual hierarchy, letting you see the layout 
with fresh eyes. The actual blurring of the site can be done in Pho¬ 
toshop, by adding a 5-10 px Gaussian blur on a screenshot. 


Once you’ve applied the effect, you’ll see results like the below example. 



Source: Visual Hierarchy 


What stands out for you on Wufoo’s homepage? Sign up buttons 
and product features are both still prominent, while lesser content 
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takes second stage. The colors of the buttons pop out against the 
background (a contrasting color), while the white space centers 
focus on the product features. 


Alternative Approaches 

If you don’t want to blur your design, you could just blur your vi¬ 
sion and stand about 3 feet away from the screen. It’s simple, even 
sounds a little stupid, but it definitely works. 

On the other hand, if your design already lives in the browser, you 
can try this quick trick with Chrome. 

• Open up your dev tools (F12) in Chrome. 

• Navigate to the body element and add -webkit-filter: blur(5px). 
You can adjust the blur pixels to your liking, but we recommend 
somewhere between 5 to 10 pixels. 

Repeating the Process 

After your first blur test, you might find that a few tweaks 
to visual hierarchy are needed. 

In that case, as Lee Munroe suggests, you’d want to look at adjusting 
elements such as: 

• Size 

• Contrast 
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• Color 

• Shape 

• Spacing & padding 

• Orientation & position 

Once you’re done, repeat your blur test and keep iterating until it 
matches the user priorities. If you used the Photoshop or Chrome 
trick, you can try again with a 10 pixel blur to test if any unwanted 
elements are still sticking out. 
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Takeaway 

More than being creative, a good artist must also consider subtleties 
like composition, colors, size, what to include, and - perhaps more 
importantly - what to leave out. That’s no easy feat, which is why 
we hold the masters like da Vinci and Van Gogh in such high regard. 

The 3 different blur tests we’ve described will help ensure that all 
the design elements on your page culminates into a single moment of 
meaning. Studies have shown that vision is our dominant sense, so 
make sure your first impression leaves the right lasting impression. 

We hope you’ve found the tips in this e-book helpful and actionable. 
Now, it’s time to start designing your interface. 
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